<template>
	<view>
		<view class="solid-bottom text-lg padding">
			<text class="text-black">{{info.title||detail.title}}</text>
		</view>
		<view class="cu-list menu-avatar">
			<view class="cu-item">
				<view class="listcard-header_image cu-avatar lg">
				<image v-if="!info.avatar" src="../../static/img/liu.jpg"></image>
				<image v-else class="cu-avatar round " :src="info.avatar"></image>
				</view>
				<view class="content flex-sub">
					<view style="margin-left: 5%;">{{info.name||detail.phone}}</view>
					<view class="text-gray text-sm flex justify-between" style="margin-left: 5%;">
						{{info.time | unix2Time}}
					</view>
				</view>
			</view>
		</view>
		<view class="solid-bottom text-df padding">{{detail.content}}</view>
		<view class="grid flex-sub padding-lr" :class="isCard?'col-3 grid-square':'col-1'">
			<view class="images">
				<image class="bg-img padding solid" v-for="(item,index) in detail.pic" :src="item" 
				@tap="ViewImage" :data-url="detail.pic[index]" mode="aspectFit"></image>
				<video v-if="detail.video" :src="detail.video" controls></video>
			</view>
		</view>
		<view style="height: 40px;"></view>
	</view>
</template>

<script>
	export default {
		props: {
			detail: {},
			info:{}
		},
		data() {
			return {};
		},
		methods: {
			ViewImage(e) {
				uni.previewImage({
					urls: this.detail.pic,
					current: e.currentTarget.dataset.url
				});
			},
		}
	}
</script>

<style lang="scss">
	.images {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		image {
			margin: 5px 0;
		}
	}
	.listcard-header_image {
		flex-shrink: 0;
		width: 60upx;
		height: 60upx;
		border-radius: 50%;
		overflow: hidden;
	
		image {
			width: 100%;
			height: 100%;
		}
	}
</style>
